import React, { useState } from 'react';
import { Button, Upload, Input, Progress } from 'antd';
import { 
  CloudUploadOutlined, 
  PictureOutlined, 
  DownloadOutlined 
} from '@ant-design/icons';

const { TextArea } = Input;

const DemoSection = () => {
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [processing, setProcessing] = useState(false);

  const handleUpload = () => {
    if (fileList.length === 0) return;
    
    setUploading(true);
    setProcessing(true);
    
    // Simulate processing
    let percent = 0;
    const interval = setInterval(() => {
      percent += 5;
      setProgress(percent);
      
      if (percent >= 100) {
        clearInterval(interval);
        setUploading(false);
        setProcessing(false);
      }
    }, 500);
  };

  const uploadProps = {
    onRemove: file => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: file => {
      setFileList([...fileList, file]);
      return false;
    },
    fileList,
  };

  const styleButtons = [
    { label: "无风格" },
    { label: "宫崎骏" },
    { label: "乐高" },
    { label: "皮克斯" },
    { label: "新海诚" },
    { label: "迪士尼" }
  ];

  const examplePrompts = [
    "增加图像的饱和度和对比度",
    "将背景改为海滩日落场景",
    "添加明亮的灯光效果",
    "将图像转换为水彩画风格"
  ];

  return (
    <section id="demo" className="py-16 bg-white dark:bg-gray-900">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">立即体验图灵画匠</h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">上传您的图片，选择喜欢的风格，体验AI图像处理的魅力</p>
        </div>
        
        <div className="max-w-4xl mx-auto bg-gray-50 dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 md:p-8 fade-in">
          <div className="grid md:grid-cols-2 gap-8">
            {/* Upload Area */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">上传图片</h3>
              
              <Upload.Dragger 
                {...uploadProps}
                className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center cursor-pointer hover:border-primary-500 transition"
              >
                <div className="flex flex-col items-center justify-center">
                  <CloudUploadOutlined className="text-4xl text-gray-400 dark:text-gray-500 mb-3" />
                  <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">点击或拖放图片到此处</p>
                  <p className="text-xs text-gray-400 dark:text-gray-500">支持JPEG、PNG、WebP格式，不超过10MB</p>
                </div>
              </Upload.Dragger>
              
              <div className="mt-4 text-center">
                <Button 
                  type="link" 
                  icon={<PictureOutlined />} 
                  className="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition"
                >
                  使用示例图片
                </Button>
              </div>
            </div>
            
            {/* Style Selection */}
            <div>
              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">选择艺术风格</h3>
              
              <div className="grid grid-cols-3 gap-3 mb-6">
                {styleButtons.map((style, index) => (
                  <Button 
                    key={index}
                    className="py-2 px-3 text-xs sm:text-sm rounded border border-gray-200 dark:border-gray-600 hover:border-primary-500 hover:text-primary-600 dark:hover:text-primary-400 transition"
                  >
                    {style.label}
                  </Button>
                ))}
              </div>
              
              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">文字描述/指令</h3>
              
              <div className="mb-4">
                <TextArea 
                  className="w-full px-4 py-3 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:text-gray-200" 
                  rows={4} 
                  placeholder="描述你想要的图像效果，或者给AI提供具体的编辑指令..."
                  maxLength={500}
                  showCount
                />
              </div>
              
              <div className="mb-4">
                <p className="text-sm text-gray-500 dark:text-gray-400 mb-2">示例：</p>
                <div className="flex flex-wrap gap-2">
                  {examplePrompts.map((prompt, index) => (
                    <span 
                      key={index} 
                      className="text-xs px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-gray-600 dark:text-gray-300"
                    >
                      {prompt}
                    </span>
                  ))}
                </div>
              </div>
              
              <Button 
                type="primary" 
                icon={<PictureOutlined/>} 
                size="large"
                className="w-full py-3 bg-primary-600 hover:bg-primary-700 text-white font-medium rounded-lg shadow-md transition flex items-center justify-center"
                onClick={handleUpload}
                loading={uploading}
              >
                生成图像
                <span className="text-xs ml-2 opacity-80">处理时间约10-30秒</span>
              </Button>
              
              {processing && (
                <div className="mt-4">
                  <Progress percent={progress} size="small" />
                  <div className="text-xs text-gray-500 dark:text-gray-400 mt-1 flex justify-between">
                    <span>处理中...</span>
                    <span>{progress}%</span>
                  </div>
                </div>
              )}
              
              {!processing && progress === 100 && (
                <Button 
                  type="primary" 
                  icon={<DownloadOutlined />} 
                  className="w-full mt-4"
                >
                  下载图像
                </Button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default DemoSection; 